

<template>
<van-dialog
    @confirm="()=>{
      saveSettings(true);


    }"
    @cancel="()=>{
      show=false;
    }"

    v-model:show="show" style="padding:10px;"
    :width="650"
    show-cancel-button show-confirm-button title="过滤">
    <el-form label-width="30%" label-position="left">
      <el-form-item label="最大单词数">
          <el-input v-model="formData.pageSize"></el-input>
      </el-form-item>
      <el-form-item label="熟练度">
        <el-checkbox style="margin-left:0; width: 100px;" v-model="chooseBox[1]" :label="config.levelRate['1']" size="large" border />
        <el-checkbox style="margin-left:0; width: 100px;" v-model="chooseBox[2]" :label="config.levelRate['2']" size="large" border />
        <el-checkbox style="margin-left:0; width: 100px;" v-model="chooseBox[3]" :label="config.levelRate['3']" size="large" border />
        <el-checkbox style="margin-left:0; width: 100px;" v-model="chooseBox[4]" :label="config.levelRate['4']" size="large" border />
        <el-checkbox style="margin-left:0; width: 100px;" v-model="chooseBox[5]" :label="config.levelRate['5']" size="large" border />
        <el-checkbox style="margin-left:0; width: 100px;" v-model="chooseBox[6]" :label="config.levelRate['6']" size="large" border />
      </el-form-item>

      <el-form-item label="单词长度">
        <el-input v-model="formData.maxWordLength"></el-input>
      </el-form-item>
      <el-form-item label="排序">
        <el-radio-group v-model="formData.filterSort">
          <el-radio style="margin-left:0; width: 100px;"  :label="0" size="large" border>{{sortFilterMap['0']}}</el-radio>
          <el-radio style="margin-left:0; width: 100px;"  :label="1" size="large" border>{{sortFilterMap['1']}}</el-radio>
          <el-radio style="margin-left:0; width: 100px;"  :label="2" size="large" border>{{sortFilterMap['2']}}</el-radio>
        </el-radio-group>
      </el-form-item>
    </el-form>
</van-dialog>
</template>
<script setup>
import {ref,defineExpose,onMounted} from 'vue';
import {getMySetting, setSetting} from "@/apis/apis";
import config from '@/config';
import setting from "@/setting";
import ret from "@/utils/ret";

let show =ref(false)
let chooseBox=ref({
  1:false,
  2:false,
  3:false,
  4:false,
  5:false,
  6:false
})
let formData=ref({
  pageSize:10,
  filterLevel:[1,2,3,4,5,6],
  maxWordLength:10,
  filterSort:0
})
let sortFilterMap=ref({
  0:"时间倒序",
  1:"熟练倒序",
  2:"熟练升序"
})

onMounted(()=>{
  loadSetting();
})
function loadSetting() {
  getMySetting({}).then(d=>{
    if (d.data.code!=-1){
      formData.value=d.data.data;
      formData.value.filterLevel=JSON.parse(d.data.data.filterLevel)
      formData.value.filterLevel.forEach(item=>{
        chooseBox.value[item+""]=true;
      })
    }
  });
}
function saveSettings(useRes){
  let chooseLevel=[];

  for (let i = 1; i <=6; i++) {
    formData.value.filterLevel=[];
    if(chooseBox.value[i+""]==true){
      chooseLevel.push(i);
    }
  }
  chooseLevel=JSON.stringify(chooseLevel);

  setSetting({
    ...setting.value,
    ...formData.value,
    filterLevel:chooseLevel
  }).then(d=>{
    ret.showRetMessage(d);
    if (useRes)resFun();

  })
}
let resFun=()=>{};

defineExpose({
  apply:function (fun){
    resFun=fun;
    loadSetting();
    show.value=true;
  }
})
</script>
<style scoped>

</style>